import { motion, useMotionTemplate } from 'framer-motion';
import { useState } from 'react';
import { toast } from 'sonner';

export default function ContactSection() {
  const [formData, setFormData] = useState({
    name: '',
    company: '',
    phone: '',
    email: '',
    companySize: '',
    message: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const validateForm = () => {
    const errors = [];
    
    if (!formData.name.trim()) {
      errors.push('请输入姓名');
    }
    
    if (!formData.company.trim()) {
      errors.push('请输入公司名称');
    }
    
    if (!formData.phone.trim()) {
      errors.push('请输入联系电话');
    }
    
    if (!formData.email.trim()) {
      errors.push('请输入邮箱地址');
    } else if (!/^\S+@\S+\.\S+$/.test(formData.email)) {
      errors.push('请输入有效的邮箱地址');
    }
    
    return errors;
  };
  
  const handleSubmit = async () => {
    // 表单验证
    const errors = validateForm();
    if (errors.length > 0) {
      errors.forEach(error => toast.error(error));
      return;
    }
    
    setIsSubmitting(true);
    
    try {
      // 模拟邮件发送过程
      console.log('表单数据:', formData);
      
      // 在实际应用中，这里应该是调用后端API发送邮件
      // 这里使用setTimeout模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));
      
      // 模拟发送成功
      toast.success('申请已提交成功！我们将尽快与您联系。');
      
      // 重置表单
      setFormData({
        name: '',
        company: '',
        phone: '',
        email: '',
        companySize: '',
        message: ''
      });
      
      // 显示模拟发送信息
      console.log(`模拟发送邮件到: 250532204@qq.com`);
      console.log('邮件内容:');
      console.log(`姓名: ${formData.name}`);
      console.log(`公司名称: ${formData.company}`);
      console.log(`电话: ${formData.phone}`);
      console.log(`邮箱: ${formData.email}`);
      console.log(`公司规模: ${formData.companySize}`);
      console.log(`需求描述: ${formData.message}`);
    } catch (error) {
      toast.error('提交失败，请稍后重试。');
      console.error('提交错误:', error);
    } finally {
      setIsSubmitting(false);
    }
  };
  return (
    <section id="contact" className="py-20 bg-gradient-to-b from-blue-50 to-white">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-5xl mx-auto bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
          <div className="grid md:grid-cols-2">
            <div className="p-8 md:p-12 bg-blue-600 text-white flex flex-col justify-center">
              <h2 className="text-3xl font-bold mb-6">联系我们</h2>
              <p className="mb-8 opacity-90">
                填写表单申请试用或演示，我们的团队将尽快与您联系，为您提供专业的解决方案。
              </p>
              
               <div className="space-y-6">
                  <div className="flex items-start">
                    <div className="flex-shrink-0 h-10 w-10 rounded-full bg-white/20 flex items-center justify-center mt-1 mr-4">
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="text-lg font-medium text-white mb-1">邮箱</h4>
                      <p className="text-white/80">frank@ework.com.cn</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start">
                    <div className="flex-shrink-0 h-10 w-10 rounded-full bg-white/20 flex items-center justify-center mt-1 mr-4">
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="text-lg font-medium text-white mb-1">电话</h4>
                      <p className="text-white/80">0512-65248088</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start">
                    <div className="flex-shrink-0 h-10 w-10 rounded-full bg-white/20 flex items-center justify-center mt-1 mr-4">
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="text-lg font-medium text-white mb-1">地址</h4>
                      <p className="text-white/80">江苏苏州吴中区金山南路868号锐晶大厦A幢601</p>
                    </div>
                  </div>
                  
                  <div className="flex items-start">
                    <div className="flex-shrink-0 h-10 w-10 rounded-full bg-white/20 flex items-center justify-center mt-1 mr-4">
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                      </svg>
                    </div>
                    <div>
                      <h4 className="text-lg font-medium text-white mb-1">微信</h4>
                      <div className="mt-2">
                        <img 
                           src="/img/weixin.jpg" 
                          alt="捷益通财务项目管理系统微信咨询二维码" 
                          className="w-32 h-32 rounded-md border-2 border-white/30"
                        />
                      </div>
                      <p className="text-white/80 mt-2">扫码添加微信咨询</p>
                    </div>
                  </div>
                </div>
            </div>
            
             <div className="p-8 md:p-12">
              <h3 className="text-2xl font-bold text-gray-900 mb-6">申请试用</h3>
              <form className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">姓名 *</label>
                    <input
                      type="text"
                      id="name"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                      placeholder="请输入姓名"
                      value={formData.name}
                      onChange={(e) => setFormData({...formData, name: e.target.value})}
                    />
                  </div>
                  <div>
                    <label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">公司名称 *</label>
                    <input
                      type="text"
                      id="company"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                      placeholder="请输入公司名称"
                      value={formData.company}
                      onChange={(e) => setFormData({...formData, company: e.target.value})}
                    />
                  </div>
                </div>
                
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">电话 *</label>
                    <input
                      type="tel"
                      id="phone"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                      placeholder="请输入联系电话"
                      value={formData.phone}
                      onChange={(e) => setFormData({...formData, phone: e.target.value})}
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">邮箱 *</label>
                    <input
                      type="email"
                      id="email"
                      className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                      placeholder="请输入邮箱地址"
                      value={formData.email}
                      onChange={(e) => setFormData({...formData, email: e.target.value})}
                    />
                  </div>
                </div>
                
                <div>
                  <label htmlFor="company-size" className="block text-sm font-medium text-gray-700 mb-1">公司规模</label>
                  <select
                    id="company-size"
                    className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                    value={formData.companySize}
                    onChange={(e) => setFormData({...formData, companySize: e.target.value})}
                  >
                    <option value="">请选择公司规模</option>
                    <option value="1-10">1-10人</option>
                    <option value="11-50">11-50人</option>
                    <option value="51-200">51-200人</option>
                    <option value="201-500">201-500人</option>
                    <option value="500+">500人以上</option>
                  </select>
                </div>
                
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">需求描述</label>
                  <textarea
                    id="message"
                    rows={4}
                    className="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                    placeholder="请简要描述您的需求"
                    value={formData.message}
                    onChange={(e) => setFormData({...formData, message: e.target.value})}
                  ></textarea>
                </div>
                
                <motion.button
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  type="button"
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-md transition-colors"
                  onClick={handleSubmit}
                  disabled={isSubmitting}
                >
                  {isSubmitting ? '提交中...' : '提交申请'}
                </motion.button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}